import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Search } from "@react-vant/icons";
import Gg from "../../../components/Gg";
import "./index.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const cityarr = localStorage.getItem("city") || "上海";
  const [zq,setZq]=useState<string[]>(["皮肤专科","儿科专区","妇科专区","减重专区","胃肠专区","心理专区"]);
  const city = () => {
    navigate("/city");
  };
  const ss = () => {
    navigate("/search");
  };
  const qb = () => {
    console.log("钱币");
    navigate("/qb");
  };
  const kswz = () => {
    console.log("快速问诊");
    navigate("/kswz")
  };
  const zjwz = () => {
    console.log("专家问诊");
    navigate("/zjwz")
  };
  const qgh = () => {
    console.log("去挂号");
    navigate("/qgh")
  };

  return (
    <div>
      <div className="top">
        <div className="city" onClick={() => city()}>
          {cityarr}
        </div>
        <div className="title">
          <img src="https://kano.guahao.com/8dp830815915" />
        </div>
        <div className="qb" onClick={() => qb()}>
          <img src="https://kano.guahao.com/Uab820355524" />
        </div>
      </div>
      <div className="button">
        <div className="input" onClick={() => ss()}>
          <div>
            <Search />
            <input type="txt" />
            <button>搜索</button>
          </div>
        </div>
        <div className="kzq">
          <div onClick={() => kswz()}>
            <div>
              <img src="https://kano.guahao.com/W51849727945?webp=80" />
            </div>
            <div className="title">快速问诊</div>
            <div className="word">3分钟内医生接诊</div>
          </div>
          <div onClick={() => zjwz()}>
            <div>
              <img src="https://kano.guahao.com/2x4849728905?webp=80" />
            </div>
            <div className="title">专家问诊</div>
            <div className="word">住哪几实时在线服务</div>
          </div>
          <div onClick={() => qgh()}>
            <div>
              <img src="https://kano.guahao.com/U0m513250003?webp=80" />
            </div>
            <div className="title">去挂号</div>
            <div className="word">千家号源免费预约</div>
          </div>
        </div>
        <div className="ht">
          <img src="https://kano.guahao.com/vGY932025012?webp=80" />
        </div>
        <div className="ggbj">
          <Gg />
        </div>
        <div className='newUser'>
          <img src="https://kano.guahao.com/HNx929060788"/>
        </div>
        <div className="zq">
          {zq.length>0 && zq.map((item,index)=><div key="index">{item}</div>)}
        </div>
      </div>
    </div>
  );
};
export default Index;
